<template>
    <div class="partition-content">
        <div class="partition-content-head">
            <PageTitle v-if="title" :title="title"></PageTitle>
            <slot name="header"></slot>
        </div>
        <div class="partition-content-body">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PartitionContent',
    props: {
        title: {
            type: String,
            default: ''
        }
    }
}
</script>

<style lang="less" scoped>
.partition-content {
    display: flex;
    flex-direction: column;
    margin: -20px;
    min-height: ~'calc(100% + 40px)';
    &-head {
        flex-shrink: 0;
        padding: 20px;
        border-bottom: 1px solid #eee;
        background-color: #fff;
    }
    &-body {
        flex: 1;
        padding: 20px;
        background-color: #fafafa;
    }
}
</style>